import * as React from "react";
import type { OrgWithMembers } from "@/queries/auth";
import { MembersTable } from "./members-table";
import { membersTableColumns } from "./members-table-columns";
import { OrgsTable } from "./orgs-table";
import { orgsTableColumns } from "./orgs-table-columns";

export function OrganizationDataTable({ data }: { data: OrgWithMembers[] }) {
  const [selectOrgId, setSelectOrgId] = React.useState<string | null>(null);
  const members = data.find((d) => d.id === selectOrgId)?.members ?? [];
  return (
    <div className="grid h-full w-full grid-cols-2 gap-4">
      <OrgsTable columns={orgsTableColumns} data={data} onRowClick={setSelectOrgId} />
      <MembersTable columns={membersTableColumns} data={members} />
    </div>
  );
}
